<template>
  <div class="page_root">
    <div class="page_left">
      <tabs-drawer
        :drawerList="drawerList"
        :currentIndex="currentIndex"
        @change="changeIndex"
      >
      </tabs-drawer>
    </div>
    <div class="page_right">
      <div v-show="currentIndex === 0">
        <device-management ref="devicemanagement"></device-management>
      </div>
      <div v-show="currentIndex === 1">
        <task-management ref="taskmanagement"></task-management>
      </div>
    </div>
  </div>
</template>

<script>
import TabsDrawer from "@/components/TabsDrawer/index.vue";
import DeviceManagement from "./subcomponents/DeviceManagement";
import TaskManagement from "./subcomponents/TaskManagement";

export default {
  components: {
    TabsDrawer,
    DeviceManagement,
    TaskManagement,
  },
  data() {
    return {
      drawerList: [
        {
          index: 0,
          name: "设备管理",
        },
        {
          index: 1,
          name: "任务管理",
        },
      ],
      currentIndex: 0,
    };
  },
  methods: {
    loadData() {
      console.log(this.$refs)
      if (this.currentIndex === 0) {
        this.$refs.devicemanagement.loadData();
      } else {
        this.$refs.taskmanagement.loadData();
      }
    },

    changeIndex(index) {
      this.currentIndex = index;
      this.loadData();
    },
  },
};
</script>

<style lang="scss" scoped>
.page_root {
  display: flex;
  height: 100%;
  .page_right {
    flex: 1;
    & > div {
      height: 100%;
      width: 100%;
    }
  }
}
</style>